<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Basic Box </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<!-- Site wrapper -->
<div class="wrapper">


  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Basic Box
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Basic Box</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		<div class="row">
		
		<!--Basic!-->
          <div class="col-md-6 col-lg-3">
            <div class="box">
              <div class="box-body">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.</p>
              </div>
            </div>
          </div>
		
		<!--With title!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">With <strong>title</strong></h4>
			  </div>
              <div class="box-body">
                <p><code>.box-header.with-border  &gt;  h4.box-title</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Title size!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">
			  <div class="box-header with-border">
				<h3 class="box-title">Title <strong>size</strong></h3>
			  </div>
              <div class="box-body">
                <p><code>h3.box-title</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Title in header!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">			  
              <div class="box-header with-border">
                <h4 class="box-title">Title in <strong>header</strong></h4>
              </div>
              <div class="box-body">
                <p><code>.box-header &gt; .box-title</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Without divider!-->
		  <div class="col-md-6 col-lg-4">
            <div class="box">
			  <div class="box-header without-border">
				<h4 class="box-title">Without<strong> divider</strong></h4>
			  </div>
              <div class="box-body">
                <p><code>.box-header &gt; .box-title</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Bold title!-->
		  <div class="col-md-6 col-lg-4">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title box-title-bold">Bold Title</h4>
			  </div>
              <div class="box-body">
                <p><code>.box-title-bold</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Title and description!-->
		  <div class="col-md-6 col-lg-4">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">Title and <strong>description</strong> <small>More description</small></h4>
			  </div>
              <div class="box-body">
                <p><code>&lt;small&gt;</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Title and sidetitle!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">Title and <strong>sidetitle</strong> <small class="sidetitle">More description</small></h4>
			  </div>
              <div class="box-body">
                <p><code>.sidetitle</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Title and subtitle!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">Title and <strong>subtitle</strong> <small class="subtitle">More description below the box title</small></h4>
			  </div>
              <div class="box-body">
                <p><code>.subtitle</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Bordered box!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box box-bordered">
			  <div class="box-header with-border">
				<h4 class="box-title"><strong>Bordered</strong> box</h4>
			  </div>
              <div class="box-body">
                <p><code>.box-bordered</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Shadowed box!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box box-shadowed">
			  <div class="box-header with-border">
				<h4 class="box-title"><strong>Shadowed</strong> box</h4>
			  </div>
              <div class="box-body">
                <p><code>.box-shadowed</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Shadow on hover!-->
		  <div class="col-md-6 col-lg-4">
            <div class="box box-hover-shadow">
			  <div class="box-header with-border">
				<h4 class="box-title"><strong>Shadow</strong> on hover box</h4>
			  </div>
              <div class="box-body">
                <p><code>.box-hover-shadow</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Transparent!-->
		  <div class="col-md-6 col-lg-4">
            <div class="box box-transparent">
			  <div class="box-header with-border">
				<h4 class="box-title"><strong>Transparent</strong> box</h4>
			  </div>
              <div class="box-body">
                <p><code>.box-transparent</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
            </div>
          </div>
		
		<!--Box footer!-->
		  <div class="col-md-6 col-lg-4">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">Box <strong>footer</strong></h4>
			  </div>
              <div class="box-body">
                <p><code>div.box-footer</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
              <div class="box-footer">
                <p>A footer for more content inside</p>
              </div>
            </div>
          </div>
		
		<!--Box footer!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">Box <strong>footer</strong></h4>
			  </div>
              <div class="box-body">
                <p><code>div.box-footer</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
              <div class="box-footer">
                <button class="btn btn-primary">Submit</button>
                <button class="btn btn-secondary">Cancel</button>
              </div>
            </div>
          </div>
		
		<!--Box footer!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">Box <strong>footer</strong></h4>
			  </div>
              <div class="box-body">
                <p><code>div.box-footer</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
              <div class="box-footer text-right">
                <button class="btn btn-primary">Submit</button>
                <button class="btn btn-secondary">Cancel</button>
              </div>
            </div>
          </div>
		
		<!--Box footer!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">Box <strong>footer</strong></h4>
			  </div>
              <div class="box-body">
                <p><code>div.box-footer</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.</p>
              </div>
              <div class="box-footer text-right p-0">
                <button class="btn btn-primary"><i class="ti-check"></i></button>
              </div>
            </div>
          </div>
		
		<!--Box footer!-->
		  <div class="col-md-6 col-lg-3">
            <div class="box">
			  <div class="box-header with-border">
				<h4 class="box-title">Box <strong>footer</strong></h4>
			  </div>
              <div class="box-body">
                <p><code>div.box-footer</code></p>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
              </div>
              <div class="box-footer flexbox">					 
				  <input type="checkbox" id="basic_checkbox_1">
				  <label for="basic_checkbox_1">Save as draft</label>
                <div class="text-right flex-grow">
                  <button class="btn btn-sm btn-primary">Submit</button>
                  <button class="btn btn-sm btn-secondary">Cancel</button>
                </div>
              </div>
            </div>
          </div>
		
		</div>
		

    </section>
    <!-- /.content -->
  </div>

 

</div>


	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	

</body>
</html>
